<template>
  <el-cascader @change="handleChange" ref="myCascader" v-model="id" :props="props" :show-all-levels = "false" clearable></el-cascader>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "DepSelect",
  data() {
    return {
      id:[],
      props: {
        value: 'id',
        label: 'depname',
        checkStrictly:true,
        expandTrigger: 'hover',
        lazy: true,
        lazyLoad (node, resolve) {
          let f_id = 0
          let isChild = true
          const level = node.level
          if (level === 0){
            request.get('/dep/getDepByfather/'+f_id).then(response =>{
              //注意懒加载内部this指向变了
              resolve(response.data.data)
            })
          }
          if(level >0)
            f_id = node.data.id
          if(level > 0 && isChild === true){
            request.get('/dep/getDepByfather/'+f_id).then(response =>{
              if (response.data.data === null)
                isChild =false
              resolve(response.data.data)
            })
          }


        }
      }
    }
  },
  methods: {
    handleChange(data) {
      this.value = data;
      if (this.value && this.value.length == 0) {
        this.$refs.myCascader.$refs.panel.checkedValue = []; // 清空选中值
        this.$refs.myCascader.$refs.panel.clearCheckedNodes(); // 清空级联选择器选中状态
        this.$refs.myCascader.$refs.panel.activePath = []; // 清除高亮
        this.$refs.myCascader.$refs.panel.syncActivePath(); // 初始化（只展示一级节点）
      }
    }
  },

  computed: {
    selected(){
      return this.id.at(-1)
    }
  },
  watch: {
    selected:{
      handler(fid){
        this.$bus.$emit('transferId',fid)
      }
    }
  }

}

</script>

<style scoped>

</style>